<template>
    <div class="pic">
        <div>
            <label><input type="file" id="file"> </label>
            <label><Button  type="primary" @click="loadimage()">开始转换</Button> </label>
            <br/>
            <div class="img_view">
                <img v-for="item in albums" :src="'https://s3.cifuwu.com//image/show/origin/'+ item" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import { loadimage } from '../../http/API/index'
    export default {
        data(){
            return{
                imgData: '',
                albums:[],
                album:[],
            }
        },
        computed: {
            address() {
                console.log(this.albums)
            }
        },
        methods:{
            loadimage() {
                loadimage(this.imgData).then((res) => {
                    if (res.code === 20000) {
                        this.albums.push(res.data['name']) ;
                        this.album = this.albums[0]+","+this.albums[1]+","+this.albums[2]+","+this.albums[3];
                        this.$emit("getAlbum", this.album);
                        console.log(this.album);
                    }
                }).catch(function (e) {
                    console.log(e);
                })
            },
             startt() {
                var file = document.getElementById('file');
                 let _this = this;
                 file.onchange = function (result) {
                     let image = result.target.files[0];

                     let imgFile = new FileReader();
                     imgFile.readAsDataURL(image);
                     imgFile.onload = function (e) {
                         _this.imgData = e.target.result;
                     };
                }
              }
            },
        mounted(){
            this.startt()
        }
    }
</script>

<style scoped>
    .img_view{
        width: 100%;

    }
    .img_view img{
        width: 200px;
        height: 200px;
    }
    .pic{
        width: 500px
    }
</style>